<template>
    <div class="daily" v-loading="loading">
        <merchantNum />
        <searchForm class="search-form" :searchFormConfig="searchFormConfig" @search="onClickSearch"
            @clear="onClickClear" />
        <plainTable :tableData="tableData" :tableConfigData="tableConfigData" :pageInfo="pageInfo" @prevPage="prevPage" @nextPage="nextPage" />
    </div>
</template>

<script setup>
import merchantNum from '@/components/merchantNum.vue'
import searchForm from '@/components/searchForm.vue'
import plainTable from '@/components/plainTable.vue'
import { useDaily } from '@/hooks/account'
import { filterEffectObj, dateTransform,getDateAnd7DaysAgo } from '@/utils/index'

const { loading, tableData, tableConfigData, searchFormConfig, initData,prevPage, nextPage, pageInfo} = useDaily();
// 点击搜索按钮
const onClickSearch = (searchForm) => {
    const filteredSearchObj = filterEffectObj(searchForm, (value) => {
        return value;
    });
    clog('filteredSearchObj', filteredSearchObj)
    initData({
        currency: filteredSearchObj.currency ?? '',
        start_date: filteredSearchObj.dateRange[0] ? dateTransform(filteredSearchObj.dateRange[0]) : '',
        end_date: filteredSearchObj.dateRange[1] ? dateTransform(filteredSearchObj.dateRange[1]) : '',
    })
}
// 点击清空按钮
const onClickClear = () => {
    const { today, sevenDaysAgo } = getDateAnd7DaysAgo();
    initData({
        currency: "VND",
        start_date: sevenDaysAgo.dateStr,
        end_date: today.dateStr,
    });
}
</script>
<style scoped lang="scss">
.daily {
    .search-form {
        margin-top: 32px;
        margin-bottom: 32px;
    }
}
</style>